<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con_wn">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="conres">
                  <div class="ra"><h3>查看获奖名单</h3></div>
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="免费体验活动" name="first">
                     <div class="mouen">
                        <div class="list">
                            <div class="con ">
                                <div class="conimg"><img src="@/assets/img/aa.png" alt=""></div>
                                <div class="donen">
                                  <div class="wen">                                   
                                    <div class="yyy">
                                      <div class="www">免费体验</div>
                                      <h5>简柏格真皮百搭款女包</h5>  
                                    </div>                                     
                                    <p>活动时间：2019-11-27  -  2019-12-03</p>
                                    <p>免费体验数量：6份</p>
                                    <p>市场参考价：399元</p>
                                    <p>申请时间：2019-11-25</p>
                                  </div>
                                  <div class="wengowap">
                                  
                                    <div class="onen">
                                      <div class="woneg" @click="$router.push('/bu41details?types='+'1')">查看详情</div>
                                      <div @click="$router.push('/buhjmd')" class="woneg">获奖名单</div>
                                    </div>
                                  </div>
                               
                                </div>
                            </div>
                        </div>
                     </div>
                    </el-tab-pane>
                    <el-tab-pane label="价格竞猜活动" name="second">
                      <div class="mouen">
                        <div class="list">
                            <div class="con">
                                <div class="conimg"><img src="@/assets/img/aa.png" alt=""></div>
                                <div class="donen">
                                  <div class="wen">                                   
                                    <div class="yyy">
                                      <div class="www aaaa">价格竞猜</div>
                                      <h5>简柏格真皮百搭款女包</h5>  
                                    </div>                                     
                                    <p>活动时间：2019-11-27  -  2019-12-03</p>
                                    <p>免费体验数量：6份</p>
                                    <p>市场参考价：399元</p>
                                    <p>申请时间：2019-11-25</p>
                                  </div>
                                  <div class="wengowap">
                                  
                                    <div class="onen">
                                      <div class="woneg" @click="$router.push('/bu41details?types='+'2')">查看详情</div>
                                      <div class="woneg">获奖名单</div>
                                    </div>
                                  </div>
                               
                                </div>
                            </div>
                        </div>
                     </div>
                    </el-tab-pane>
                   
                  </el-tabs>
                   <businessF/>
                </div>
              </div>
              
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
        activeName: 'first',
      }
      
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.conres /deep/  .el-tabs__nav {
  margin-left: 335px
}
.conres /deep/ .el-tabs__item.is-active {color: #f06048;}
.conres /deep/ .el-tabs__active-bar {color: #f06048;}
.conres /deep/ .el-tabs__item:hover {color: #f06048;}
.conres /deep/ .el-tabs__active-bar {background-color:#f06048 }
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.yyy  {
  display: flex;
  justify-content: space-between;
}
.back .con_wn {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  height: 1227px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.conres {
  height: 1227px;
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.conres .ra {
  font-size: 20px;
  color: #313131;
  margin-top: 15px;
  margin-bottom: 20px;
}
.conres h4{
  font-family: SourceHanSansCN-Bold;
	font-size: 20px;
	font-weight: 550;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #313131;
  text-align: center;
}
.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
}
.mouen {
    width: 861px;
    margin: 0 auto;
}
.mouen .list{
    width: 861px;
    height: 160px;
    border-bottom: 1px solid #dcdcdc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mouen .list .con{
    width: 861px;
    height: 123px;
}
.con {
  display: flex;
  justify-content: space-between;
}
.con .conimg {
  width: 120px;
	height: 120px;
}
.con .conimg img{
  width: 120px;
	height: 120px;
}
.con .donen .www {
  width: 92px;
	height: 27px;
	background-color: #80c269;
	border-radius: 14px;
  font-size: 18px;
	color: #ffffff;
  text-align: center;
  line-height: 27px;
  margin-right: 10px;
}
.con .donen {
  width: 720px;
    display: flex;
  justify-content: space-between;
}
.con .donen .wen p{
  line-height: 25px;
  color: #707070;

}
.con .donen h5 {
  font-size: 18px;
  color: #313131
}
.woneg {
  width: 95px;
	height: 26px;
	border-radius: 13px;
	border: solid 1px #f06048;
  color: #f06048;
  font-size: 16px;
  text-align: center;
  line-height: 26px;
  margin-top: 15px
}
.onen {
  margin-left: 60px;
  margin-top: 30px;
}
.con .donen .aaaa {
  background-color: #8f82bc
}

.wengowap {
  text-align: right
}
</style>